<template>
  <div class="dorm-list-container">
    <!-- 查询表单 -->
    <el-form inline>
      <el-form-item label="宿舍编号">
        <el-input v-model="searchDormNumber" placeholder="请输入宿舍编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchDorms">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 新增宿舍按钮 -->
    <el-button type="primary" @click="handleAddData" style="margin-bottom: 20px;">
      新增宿舍
    </el-button>

    <!-- 宿舍信息列表 -->
    <el-table :data="dorms" style="width: 100%" v-loading="loading">
      <el-table-column prop="dormNumber" label="宿舍编号" />
      <el-table-column prop="capacity" label="宿舍容量" />
      <el-table-column prop="occupied" label="已占用床位数" />
      <el-table-column prop="facilities" label="设施描述" />
      <el-table-column prop="building" label="楼编号" />
      <el-table-column prop="floor" label="楼层" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增宿舍弹窗 -->
    <el-dialog :title="dialogTitle" v-model="addDataDialogVisible" @close="resetAddForm">
      <el-form :model="addFormData" status-icon @submit.prevent="handleAddSubmit">
        <el-form-item label="宿舍编号" prop="dormNumber">
          <el-input v-model="addFormData.dormNumber"></el-input>
        </el-form-item>
        <el-form-item label="宿舍容量" prop="capacity">
          <el-input-number v-model="addFormData.capacity" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="已占用床位数" prop="occupied">
          <el-input-number v-model="addFormData.occupied" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="设施描述" prop="facilities">
          <el-input v-model="addFormData.facilities"></el-input>
        </el-form-item>
        <el-form-item label="楼编号" prop="building">
          <el-input v-model="addFormData.building"></el-input>
        </el-form-item>
        <el-form-item label="楼层" prop="floor">
          <el-input-number v-model="addFormData.floor" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDataDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑宿舍弹窗 -->
    <el-dialog :title="dialogTitle" v-model="editDataDialogVisible" @close="resetEditForm">
      <el-form :model="editFormData" status-icon @submit.prevent="handleEditSubmit">
        <el-form-item label="宿舍编号" prop="dormNumber">
          <el-input v-model="editFormData.dormNumber"></el-input>
        </el-form-item>
        <el-form-item label="宿舍容量" prop="capacity">
          <el-input-number v-model="editFormData.capacity" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="已占用床位数" prop="occupied">
          <el-input-number v-model="editFormData.occupied" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="设施描述" prop="facilities">
          <el-input v-model="editFormData.facilities"></el-input>
        </el-form-item>
        <el-form-item label="楼编号" prop="building">
          <el-input v-model="editFormData.building"></el-input>
        </el-form-item>
        <el-form-item label="楼层" prop="floor">
          <el-input-number v-model="editFormData.floor" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDataDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 定义响应式数据
const searchDormNumber = ref('');
const dorms = ref([]);
const loading = ref(false);
const addDataDialogVisible = ref(false);
const editDataDialogVisible = ref(false);
const addFormData = ref({
  dormNumber: '',
  capacity: 0,
  occupied: 0,
  facilities: '',
  building: '',
  floor: 0,
});
const editFormData = ref({});
const dialogTitle = ref('新增宿舍');

// 获取宿舍信息
function getDorms() {
  loading.value = true;
  axios.get('http://localhost:8080/user/getdorms')
    .then((response) => {
      dorms.value = response.data;
      loading.value = false;
    })
    .catch((error) => {
      ElMessage.error('查询失败: ' + error.message);
      loading.value = false;
    });
}

// 搜索宿舍信息
function searchDorms() {
  loading.value = true;
  axios.get('http://localhost:8080/user/searchDorms', {
    params: { keyword: searchDormNumber.value }
  })
  .then((response) => {
    dorms.value = response.data;
    loading.value = false;
  })
  .catch((error) => {
    ElMessage.error('搜索失败: ' + error.message);
    loading.value = false;
  });
}

// 新增宿舍相关逻辑
function handleAddData() {
  dialogTitle.value = '新增宿舍';
  addDataDialogVisible.value = true;
  resetAddForm();
}

function resetAddForm() {
  addFormData.value = {
    dormNumber: '',
    capacity: 0,
    occupied: 0,
    facilities: '',
    building: '',
    floor: 0,
  };
}

function handleAddSubmit() {
  axios
    .post('http://localhost:8080/user/addDorm', addFormData.value)
    .then(() => {
      addDataDialogVisible.value = false;
      getDorms(); // 重新加载宿舍数据
    })
    .catch((error) => {
      console.error('Error adding dorm: ', error);
    });
}

// 编辑宿舍相关逻辑
function handleEdit(row) {
  dialogTitle.value = '编辑宿舍';
  editFormData.value = { ...row };
  editDataDialogVisible.value = true;
}

function handleEditSubmit() {
  axios
    .put('http://localhost:8080/user/updateDorm', editFormData.value)
    .then(() => {
      editDataDialogVisible.value = false;
      getDorms(); // 重新加载宿舍数据
    })
    .catch((error) => {
      console.error('Error updating dorm: ', error);
    });
}

function resetEditForm() {
  editFormData.value = {
    dormNumber: '',
    capacity: 0,
    occupied: 0,
    facilities: '',
    building: '',
    floor: 0,
  };
}

// 删除宿舍
function handleDelete(row) {
  axios
    .delete(`http://localhost:8080/user/deleteDorm/${row.id}`) 
    .then(() => {
      getDorms(); // 重新加载宿舍数据
    })
    .catch((error) => {
      console.error('Error deleting dorm: ', error);
    });
}

// 初始加载
onMounted(() => {
  getDorms();
});
</script>

<style scoped>
.dorm-list-container {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 0;
}

.dialog-footer {
  text-align: right;
}
</style>